<template>
	<view class="content">
		<view class="status_bar"></view>
		<image class="registerTop" src="https://zzzsep.oss-cn-beijing.aliyuncs.com/2024/03/18/6920adfa2bf44a89a5fea44b7035f373cup.png" mode="aspectFill" ></image>
		<view class="page-main">
            <view class="registertext">
				新用户注册
			</view>
			<view class="form">
				<u--form
					class="form"
					labelPosition="left"
					:model="formData"
					:rules="rules"
					ref="uForm">
					<u-form-item label="用户名" prop="username" :labelWidth="150" borderBottom>
						<u--input v-model="formData.username" placeholder="请输入用户名" border="none"/>
					</u-form-item>
					<u-form-item  label="手机号" prop="phone" :labelWidth="150" borderBottom>
						<u--input  v-model="formData.phone" placeholder="请输入手机号" border="none"/>
						
					</u-form-item>
					<u-form-item label="验证码" prop="validatenum" :labelWidth="150" borderBottom>
						<u--input v-model="formData.validatenum" placeholder="请输入验证码" border="none"/>
					    <u-button slot="right" size="mini"  type="primary" shape="circle"
						color="gray"
						plain
						:customStyle="{
							
							color: 'black'
						}" @click="getCode">{{tips}}</u-button>
					    <u-verification-code :seconds="60" @end="end" @start="start" ref="uCode" @change="codeChange">
					    </u-verification-code>
						
						
					</u-form-item>
					<u-form-item label="密码" prop="password" :labelWidth="150" borderBottom>
						<u--input type="password" v-model="formData.password" placeholder="请输入密码" border="none"/>
					</u-form-item>
					<u-form-item label="确认密码" prop="confirmPassword" :labelWidth="150" borderBottom>
						<u--input type="password" v-model="formData.confirmPassword" placeholder="请再次确认密码" border="none"/>
					</u-form-item>
				</u--form>
			</view>
			<view class="btn-group">
				<view class="submit-btn">
					<u-button
						type="primary"
						color="#b5f6f7"
						:customStyle="{
							fontSize: '36rpx',
							width: '35%',
							color:'blcak'
						}"
						@click="submitForm"
					>
						注册
					</u-button>
					<u-button
						type="primary"
						color="gray"
						plain
						:customStyle="{
							fontSize: '36rpx',
							width: '35%',
							color: 'black'
						}"
						@click="toBack()"
					>
						返回
					</u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>

	
	export default {
		data() {
			return {
			    tips: '验证码',
				formData: {
					username: null,
					phone: null,
					password: null,
					confirmPassword: null,
					validatenum: null
				},
				rules: {
					username: [
						{ required: true, message: '请输入用户名', trigger: ['blur', 'change'] },
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								let reg = /^.{1,15}$/;
								return reg.test(value);
							},
							message: '用户名长度最大15(内容不限)',
							// 触发器可以同时用blur和change
							trigger: ['change','blur'],
						}
					],
					phone: [
						{ required: true, message: '请输入手机号', trigger: ['blur', 'change'] },
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								let reg = /^[1][3,4,5,7,8][0-9]{9}$/;
								return reg.test(value);
							},
							message: '输入的手机号码格式错误',
							// 触发器可以同时用blur和change
							trigger: ['change','blur'],
						}
					],
					password: [
						{ required: true, message: '请输入密码', trigger: ['blur', 'change'] },
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								let reg = /^.{1,15}$/;
								return reg.test(value);
							},
							message: '密码长度最大15(内容不限)',
							// 触发器可以同时用blur和change
							trigger: ['change','blur'],
						}
					],
					validatenum: [
						{ required: true, message: '请输入验证码', trigger: ['blur', 'change'] },
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								let reg = /^[0-9]{6}/;
								return reg.test(value);
							},
							message: '请输入六位验证码',
							// 触发器可以同时用blur和change
							trigger: ['change','blur'],
						}
					],
					confirmPassword: [
						{ required: true, message: '请再次确认密码', trigger: ['blur', 'change'] },
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								return this.formData.password === this.formData.confirmPassword
							},
							message: '两次输入的密码不同',
							// 触发器可以同时用blur和change
							trigger: ['change','blur'],
						}
					],
				}
			}
		},
		onLoad() {

		},
		methods: {
			toBack() {
				uni.navigateTo({
					url: '/pages/login/index'
				})
			},
			// 提交数据
			submitForm (e) {
				this.$refs.uForm.validate().then(valid => {
					if (!valid) {
						return
					}
					uni.showLoading({
						title: '数据提交中...'
					})
					let that=this;
					this.$H.post("user/register", this.formData).then(res => {
						if(res.code==200)
						{uni.showToast({
							title: res.msg ,
							icon: 'success',
							duration: 3000 ,
							// success: fuction(res=>{
							// 	that.toBack()
							// })
						});
						setTimeout(function () {
							that.toBack()
						}, 2000)
						}
						else if(res.code=500){uni.showToast({
							title: res.msg,
							icon: 'none'
							
						})}
						else 
						{uni.showToast({
							title: "注册失败",
							icon: 'fail'
							
						})}
						// uni.showToast({
						// 	title: res.content,
						// 	icon: 'none'
						// })
						
					uni.hideLoading();	
					})
				})
			},
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				let phoneCodeVerification = /^[1][3-9][0-9]{9}$/;
				if (this.formData.phone == '') {
					this.$u.toast('请输入手机号');
				
				} else {
			
					if (this.$refs.uCode.canGetCode) {
						uni.showLoading({
							title: '正在获取验证码'
						})
						//模拟发送
						this.$H.post("user/sendMsg", {
							phone: this.formData.phone
						}).then(res => {
							console.log(res)
							if (res.code == 200) {
								this.$refs.uCode.start();
							}
							this.$u.toast(res.msg);
							uni.hideLoading();
						})
					} else {
						this.$u.toast('倒计时结束后再发送');
					}
				}
			},
			end() {},
			start() {}
		}
	}
</script>

<style lang="scss">
	.status_bar {
	        height: var(--status-bar-height);
	        width: 100%;
	    }
	.content {
		height: 100vh;
		background-color: #fff;
		padding-top: 0;
		padding-bottom: 0;
	}
	.registerTop{
		width: 100%;
		vertical-align: bottom;	
		
	}
	.registertext{
		font-size: 40rpx;
		text-align: center;
	}
	.page-head {
		height: 15%;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 45rpx;
		color: #fff;
	}

	
	.page-main {
		width: 92%;
		margin: 0 auto;
		margin-top: 20rpx;
		background-color: transparent;
	}
	.title {
		font-size: 45rpx;
		text-align: center;
	}
	.form {
		width: 90%;
		margin: 0 auto;
		padding-top: 10rpx;
	}

	.btn-group {
		width: 85%;
		margin: 75rpx auto;
		margin-bottom: 30rpx;
		.submit-btn {
			display: flex;
			flex-direction: row;
		}
	}
</style>
